<template>
  <table>
    <tr>
      <th>劳务公司</th>
      <th style="width: 60px;">班组</th>
      <th style="width: 40px;">姓名</th>
      <th style="width: 30px;">性别</th>
      <th>户籍</th>
      <th>身份证</th>
      <th style="width: 70px;">联系电话</th>
      <th style="width: 70px;">实名卡号</th>
      <th style="width: 40px;">工种</th>
      <th style="width: 40px;">发证机关</th>
      <th style="width: 50px;">户口性质</th>
      <th style="width: 80px;">开户银行</th>
      <th style="width: 130px;">银行卡号</th>
    </tr>
    <tr v-for="n in errorLength" class="error-tr">
      <td>
        <input
          @change="changeError(n - 1, $event, 'cooperatorName')"
          v-tooltip="errorData[n - 1].cooperatorNameDescription || '正确'"
          class="input-n160"
          style="width: 130px;"
          :class="{'error': errorData[n - 1].cooperatorNameDescription}"
          :value="errorData[n - 1].cooperatorName"/>
      </td>
      <td>
        <input
          class="input-n160"
          style="width: 60px;"
          @change="changeError(n - 1, $event, 'groupName')"
          v-tooltip="errorData[n - 1].groupNameDescription || '正确'"
          :class="{'error': errorData[n - 1].groupNameDescription}"
          :value="errorData[n - 1].groupName"/></td>
      <td>
        <input
          class="input-n160"
          style="width: 40px;"
          @change="changeError(n - 1, $event, 'name')"
          v-tooltip="errorData[n - 1].nameDescription || '正确'"
          :class="{'error': errorData[n - 1].nameDescription}"
          :value="errorData[n - 1].name"/></td>
      <td>
        <input
          class="input-n160"
          style="width: 30px;"
          @change="changeError(n - 1, $event, 'sex')"
          v-tooltip="errorData[n - 1].sexDescription || '正确'"
          :class="{'error': errorData[n - 1].sexDescription}"
          :value="errorData[n - 1].sex"/></td>
      <td>
        <input
          class="input-n160"
          style="width: 110px;"
          @change="changeError(n - 1, $event, 'censusRegister')"
          v-tooltip="errorData[n - 1].censusRegisterDescription || '正确'"
          :class="{'error': errorData[n - 1].censusRegisterDescription}"
          :value="errorData[n - 1].censusRegister"/></td>
      <td><input
        class="input-n160"
        @change="changeError(n - 1, $event, 'idCard')"
        v-tooltip="errorData[n - 1].idCardDescription || '正确'"
        :class="{'error': errorData[n - 1].idCardDescription}"
        :value="errorData[n - 1].idCard"/>
      </td>
      <td>
        <input
          class="input-n160"
          style="width: 95px;"
          @change="changeError(n - 1, $event, 'mobile')"
          v-tooltip="errorData[n - 1].mobileDescription || '正确'"
          :class="{'error': errorData[n - 1].mobileDescription}"
          :value="errorData[n - 1].mobile"/></td>
      <td>
        <input
          class="input-n160"
          style="width: 90px;"
          @change="changeError(n - 1, $event, 'timecard')"
          v-tooltip="errorData[n - 1].timecardDescription || '正确'"
          :class="{'error': errorData[n - 1].timecardDescription}"
          :value="errorData[n - 1].timecard"/></td>
      <td>
        <input
          class="input-n160"
          style="width: 40px;"
          @change="changeError(n - 1, $event, 'professionName')"
          v-tooltip="errorData[n - 1].professionNameDescription || '正确'"
          :class="{'error': errorData[n - 1].professionNameDescription}"
          :value="errorData[n - 1].professionName"/></td>
      <td>
        <input
          class="input-n160"
          style="width: 80px;"
          @change="changeError(n - 1, $event, 'issueAuthority')"
          v-tooltip="errorData[n - 1].issueAuthorityDescription || '正确'"
          :class="{'error': errorData[n - 1].issueAuthorityDescription}"
          :value="errorData[n - 1].issueAuthority"/></td>
      <td><input
        class="input-n160"
        style="width: 60px;"
        @change="changeError(n - 1, $event, 'householdType')"
        v-tooltip="errorData[n - 1].householdTypeDescription || '正确'"
        :class="{'error': errorData[n - 1].householdTypeDescription}"
        :value="errorData[n - 1].householdType"/></td>
      <td><input
        class="input-n160"
        style="width: 85px;"
        @change="changeError(n - 1, $event, 'bank')"
        v-tooltip="errorData[n - 1].bankDescription || '正确'"
        :class="{'error': errorData[n - 1].bankDescription}"
        :value="errorData[n - 1].bank"/></td>
      <td><input
        class="input-n160"
        style="width: 140px;"
        @change="changeError(n - 1, $event, 'accountNumber')"
        v-tooltip="errorData[n - 1].accountNumberDescription || '正确'"
        :class="{'error': errorData[n - 1].accountNumberDescription}"
        :value="errorData[n - 1].accountNumber"/></td>
    </tr>
  </table>
</template>

<script>
  export default {
    name: 'workerFtl',
    data () {
      return {
        errorData: [],
        errorLength: 0,
        errorMap: new Map()
      }
    },
    props: {
      errorPropsData: '',
      changeBut: {
        type: Number,
        default: 0
      }
    },
    watch: {
      changeBut () {
        this.batchAdd()
      }
    },
    mounted () {
      this.errorData = this.errorPropsData
      this.setErrorList()
    },
    methods: {
      setErrorList () {
        this.errorLength = this.errorData.length
        this.errorData.forEach((el, i) => {
          this.errorMap.set(i, el)
        })
      },
      changeError (key, e, value) {
        let obj = this.errorMap.get(key)
        if (obj) {
          let val = e.target.value
          obj[value] = val
        }
      },
      batchAdd () {
        let items = [...this.errorMap.values()]
        let list = []
        items.forEach(x => {
          list.push(`${x.cooperatorName},${x.groupName},${x.name},${x.sex},${x.censusRegister},${x.idCard},${x.mobile},${x.timecard},${x.professionName},${x.issueAuthority},${x.householdType},${x.bank},${x.accountNumber}`)
        })
        let data = {
          'form.lines': list
        }
        this.$axios({
          method: 'post',
          url: '/front/person/batchAdd.htm',
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          if (res.data.errorData.length > 0) {
            this.errorData = res.data.errorData
          } else {
            this.$message.success('导入成功')
            this.$emit('success')
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .error-tr{
    .error{
      border: 1px $red solid;
    }
  }
</style>
